<template>
  <div>
    <div class="container-box">
      <div class="slide">
        <span>故事的小黄花 从出生那年就飘着 童年的荡秋千 随记忆一直晃到现在 Re So So Si Do Si La So La Si Si Si Si La Si La So 吹着前奏望着天空我想起花瓣试着掉落 为你翘课的那一天</span>
        <span>故事的小黄花 从出生那年就飘着 童年的荡秋千 随记忆一直晃到现在 Re So So Si Do Si La So La Si Si Si Si La Si La So 吹着前奏望着天空我想起花瓣试着掉落 为你翘课的那一天</span>
      </div>
    </div>
    <p>transform: translateX移动的百分比距离是以自身为参照，但是因为#slide是处于文档流中块级元素，其宽
    度默认为父元素的宽度。所以文字只会移动父元素宽度而不是文本本身长度的距离。要解决这个问题，可以让#slide
    脱离文档流，使得文本撑开其宽度即可，我们使用position: absolute的方法。我们把动画的移动距离设置为-50%，
    同时安排两段相同的文本。当文本移动两段文本一半的距离（即一段文本的距离）时，动画重新开始，突变到起始位置
    ，在视觉上文本没有移动 ，就有了首尾相连的效果</p>
  </div>
</template>

<script>

export default {
  name: 'ElementCarousel', // 元素（文字、图片）左右轮播
  data() {
    return {
    };
  },
  methods: {
  }
};
</script>

<style scoped lang="scss">
@import '~@/styles/variables.scss';

.container-box {
  position: relative;
  width: 500px;
  height: 100px;
  line-height: 100px;
  background: $light-blue;
  color: #fff;
  overflow: hidden;
  margin: 0 auto;
}
.slide {
  position: absolute;
  white-space: nowrap;
  animation: slide 15s linear infinite;
}

@keyframes slide {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}
</style>
